<template>
	<view class="flex-col page ">





			<u-popup v-model="showPetCate" :show="showPetCate" mode="bottom" @close="showPetCate=false">
				<view>
					<view class="topPop">
						<view class="topPop1">
							<view >宠物类型</view><!-- 图片未切 -->
							<image class="img2"  src="https://ishowbp.oss-cn-hangzhou.aliyuncs.com/assets/static/imgs/circle/close.png" @click="showPetCate=false"></image>
						</view>
					</view>
					<view class="classifyBigBox">
	<!-- 			.item0 h6 span{background-color:#FF87BC;}
				.item0{background-color:#FF87BC;color:#ffffff} -->
	<!-- :style="{ background: item.background, color: item.color }" -->
	<!-- :style="colorData[index]" -->
						<view class="oneClassify flex item" :style="item.background" :class="[{selectActive:selected[item.id]==true},'item']" :key="index" v-for="(item,index) in petcatArray"
							@click="onSelectClassify(item.id)">
							{{item.title}}
						</view>
					</view>
					<view class="tl-flex-center1" style="display:flex;padding:10px;">
						<view @click="onClear" class="tl-btn-120" style="flex:1">重置</view>
						<view @click="onConfirmFiltrate" class="onConfirmFiltrate" style="flex:1;		background-image: linear-gradient(0deg, #ffbd52 100% ,#f5f7f7 0%);">确定</view>
					</view>

				</view>
		     </u-popup>



	<u-popup  v-model="show_pop" :show="show_pop" type="bottom" :custom="true" :mask-click="false" class="ppppppppppp">
	  <view class="pop">
	    <view class="btns">
	      <view class="pop-button cancel" @click="cancel()">取消</view>
	      <view class="pop-button sure" @click="sure()">确定</view>
	    </view>
	    <view class="pop-content">
	      <view class="content">
	        <scroll-view scroll-y class="left-aside">
	          <view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
	            {{ item.name }}
	          </view>
	        </scroll-view>
	        <scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-top="scrollTop">
	          <view v-for="item in slist" :key="item.id" class="s-list" :id="'main-' + item.id">
	            <view class="s-item">
	              <m-icon class="icon" type="double-left-angle" color="#F1F1F1" size="8"></m-icon>
	              {{ item.name }}
	              <m-icon class="icon" type="double-right-angle" color="#F1F1F1" size="8"></m-icon>
	            </view>
	            <view class="t-list">
	              <view
	                :class="{ active: vSelect.indexOf(titem.id) != -1 }"
	                @click="tapInfo(titem.id)"
	                class="t-item"
	                v-for="titem in item.child"
	                :key="titem.id"
	              >
	                <text>{{ titem.name }}</text>
	              </view>
	            </view>
	          </view>
	        </scroll-view>
	      </view>
	    </view>
	  </view>
	</u-popup>

		<view class="flex-col space-y-29">
			<view class="flex-col section">
				<view class="flex-col justify-start section_bg">
					<view class="flex-col section_2">
						<view class="flex-col justify-start group">
							<view class="flex-row justify-between items-center" >
								<view class="flex-col flex-1  items-center text-wrapper " :class="activeTab==0?'pos_8':''"  @click="tabSwitch(0)" >

									<text class="font_1 text">宠物拖运</text>
								</view>
								<view class="flex-col flex-1  items-center text-wrapper  " :class="activeTab==1?'pos_8':''" @click="tabSwitch(1)" >
									<text class="font_1 text">国际拖运</text>
								</view>
								<!-- <u-button @click="showPetCate = true">打开</u-button> -->

								<!-- <view class="shrink-0 relative section_3"></view> -->
							<!-- 	<image class="shrink-0 image pos"
									src="https://qiniu.ccchongya.com/chongya/images/16947555445745866370.png" />
								<image class="shrink-0 image_2 pos_3"
									src="https://qiniu.ccchongya.com/chongya/images/16947555446803444236.png" />
							 -->
							 </view>
						</view>
						<view class="flex-col group_3">
							<!-- <view class="flex-row justify-between items-center group_4"	@click="go('/pages/user/address?type=ty_from');addressType = 'from'"> -->
							<view class="flex-row justify-between items-center group_4"  @click="toAddress(1)">

								<view class="flex-row items-center space-x-14">

									<block v-if="!tyAddressFrom.contacts">
										<view class="flex-col justify-start items-center text-wrapper_2"><text
												class="font_2">发</text></view>
										<view class="flex-col items-start space-y-12">
											<text class="text_2">从哪里出发？</text>
											<text class="font_3">填写邮寄人地址信息</text>
										</view>
									</block>
									<block v-else>
										<view class="flex-col justify-start items-center text-wrapper_2"><text
												class="font_2">发</text></view>
										<view class="flex-col space-y-12">
											<view class="flex-row space-x-6">
												<text class="font_1">{{tyAddressFrom.address.city}}{{tyAddressFrom.address.name}}</text>
												<!-- <textclass="font_1">{{tyAddressFrom.city}}{{tyAddressFrom.area}}{{tyAddressFrom.address}}</text> -->
											</view>
											<text	class="self-start font_3">{{tyAddressFrom.address.address}} </text>
											<text class="self-start font_3">联系人:{{tyAddressFrom.contacts}} 电话:{{tyAddressFrom.tel}}</text>
										</view>
									</block>



								</view>
								<text class="font_3"></text>
							</view>


							<!-- <view class="flex-row justify-between items-center group_4 view" @click="go('/pages/user/address?type=ty_to');addressType = 'to'"> -->

							<view class="flex-row justify-between items-center group_4"  @click="toAddress(2)" style="margin-top:20px;">
								<view class="flex-row items-center space-x-14">

									<block v-if="!tyAddressTo.contacts">
										<view class="flex-col justify-start items-center text-wrapper_3"><text
												class="font_2">收</text></view>
										<view class="flex-col items-start space-y-12">
											<text class="text_5">要送到哪里？</text>
											<text class="font_4">填写发出人地址信息</text>
										</view>
									</block>
									<block v-else>
										<view class="flex-col justify-start items-center text-wrapper_3"><text
												class="font_2">收</text>
										</view>
										<view class="flex-col space-y-12">
											<view class="flex-row space-x-6">
												<text class="font_1">{{tyAddressTo.address.city}}{{tyAddressTo.address.name}}</text>
												<!-- <text class="font_1">{{tyAddressTo.city}}{{tyAddressTo.area}}{{tyAddressTo.address.address}}</text> -->
											</view>
											<text	class="self-start font_3">{{tyAddressTo.address.address}} </text>
											<text	class="self-start font_3">联系人:{{tyAddressTo.contacts}} 电话:{{tyAddressTo.tel}}</text>
										</view>
									</block>
								</view>
								<text class="font_3"></text>
							</view>

						</view>
					</view>


					<view class="flex-col group_7 space-y-17">
						<view class="flex-col group_5 space-y-24">
							<view class="flex-col justify-start relative group_6">
								<view class="divider"></view>
								<view class="flex-col justify-start items-center text-wrapper_4 pos_4">
									<text class="font_1">拖运详情</text>
								</view>
							</view>
						</view>




						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物数量</text>
							<view class="flex-row items-center group_11" >

						          <u-number-box  v-model="formData.number"  :step="1" :min="1" :max="100"></u-number-box>
							</view>
						</view>

						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物类型</text>
							<view class="flex-row items-center group_11" @tap="petcatshow">
							<!-- 	<picker @change="bindPetTypePickerChange" :value="formData.petType"
									:range="petTypeArray">
									<text class="font_3 text_10">{{petTypeArray[formData.petType]}}</text>
								</picker> -->
								{{petcats || '请选择宠物类型'}}
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />

							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_4">宠物体积</text>
							<view class="flex-row items-center group_11">
								<picker @change="bindPetVolumePickerChange" :value="formData.petVolume"
									:range="petVolumeArray">
									<text class="font_3 text_10">{{petVolumeArray[formData.petVolume]}}</text>
								</picker>
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />

							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_4">是否需要定位</text>
							<view class="flex-row items-center">
								<switch style="transform:scale(0.6)" :checked="formData.locateStatus == 1"
									@change="locateStatusChange" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="flex-row items-center space-x-4">
								<text class="font_4">是否加急</text>
								<image class="shrink-0 image_6"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447816110514.png" />
							</view>
							<view class="flex-row items-center">
								<switch style="transform:scale(0.6)" :checked="formData.urgentStatus == 1"
									@change="urgentStatusChange" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="flex-row items-center space-x-4">
								<text class="font_4">是否需要担保</text>
								<image class="shrink-0 image_6"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447816110514.png" />
							</view>
							<view class="flex-row items-center">
								<switch style="transform:scale(0.6)" :checked="formData.insureStatus == 1"
									@change="insureStatusChange" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="flex-row items-center space-x-6">
								<text class="font_4 text_7">检疫证书</text>
								<image class="shrink-0 image_6"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447816110514.png" />
							</view>
							<view class="flex-row items-center">
								<switch style="transform:scale(0.6)" :checked="formData.jianyiCert == 1"
									@change="jianyiCertChange" />
							</view>
						</view>

						<view class="flex-row justify-between items-center">
							<view class="font_4">笼具大小</view>
							<view class="flex-row items-center group_11">
								<picker @change="bindCageSizePickerChange" :value="formData.cageSize"
									:range="cageSizeArray">
									<text class="font_3 text_10">{{cageSizeArray[formData.cageSize]}}</text>
								</picker>
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="font_4">期望出发时间</view>
							<view class="flex-row items-center group_11">
								<!-- <text class="font_3 text_10">选择时间</text> -->
								<!-- <picker @change="bindPickerChange" :value="formData.index" :range="array">
									<text class="font_3 text_10">{{array[formData.index]}}</text>
								</picker> -->

								<uni-datetime-picker class="custom-datetime-picker" :border="false" :clearIcon="false" type="datetime" :value="formData.expectedTime"
									@change="change" />
								<image class="image_4 image_9"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447041881138.png" />
							</view>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="flex-row items-center space-x-6">
								<text class="font_4 text_7">是否需要提供笼具</text>
								<image class="shrink-0 image_6"
									src="https://qiniu.ccchongya.com/chongya/images/16947555447816110514.png" />
							</view>
							<view class="flex-row items-center">
								<switch style="transform:scale(0.6)" :checked="formData.provideCage == 1"
									@change="provideCageChange" />
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="flex-col group_12 space-y-16">

				<view class="flex-col section_7 space-y-16">
					<text class="self-start font_1">接送服务</text>
					<view class="flex-col space-y-11">
						<view class="flex-row space-x-16">
							<view class="flex-col justify-start items-center text-wrapper_7 "
								@click="selectShuttleMethod(index)"
								:class="{'text-wrapper_active':shuttleArray_index.includes(index) }"
								v-for="item,index in shuttleArray">
								<text class="font_6 text_11">{{item}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="flex-col section_7 space-y-16">
					<text class="self-start font_1">期望拖运方式</text>
					<view class="flex-col space-y-11">
						<view class="flex-row space-x-16">
							<view class="flex-col justify-start items-center text-wrapper_7 "
								@click="selectHaulMethod(index)"
								:class="{'text-wrapper_active':formData.haulMethod ==index }"
								v-for="item,index in haulMethodArray">
								<text class="font_6 text_11">{{item}}</text>
							</view>
						</view>
					</view>
				</view>




				<view class="flex-col section_8">
					<text class="self-start font_1 text_14">爱宠照片</text>
					<view class="flex-row equal-division">
						<view @click="chooseImg('petPhoto',0)"
							class="flex-col items-center section_9 equal-division-item space-y-26">
							<block v-if="!petPhotos[0]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">爱宠照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="petPhotos[0]" />
							</block>
						</view>
						<view @click="chooseImg('petPhoto',1)"
							class="flex-col items-center section_10 equal-division-item space-y-26">
							<block v-if="!petPhotos[1]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">爱宠照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="petPhotos[1]" />
							</block>
						</view>
						<view @click="chooseImg('petPhoto',2)"
							class="flex-col items-center section_10 equal-division-item space-y-26">
							<block v-if="!petPhotos[2]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">爱宠照片</text>
							</block>
							<block v-else>
								<image class="image_11" :src="petPhotos[2]" />
							</block>
						</view>
					</view>
				</view>
				<view class="flex-col section_11">
					<text class="self-start font_1 text_15">自备笼具</text>
					<view class="flex-row equal-division">
						<view @click="chooseImg('cagePhoto',0)"
							class="flex-col items-center section_9 equal-division-item space-y-26">
							<block v-if="!cagePhotos[0]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">自备笼具</text>
							</block>
							<block v-else>
								<image class="image_11" :src="cagePhotos[0]" />
							</block>
						</view>
						<view @click="chooseImg('cagePhoto',1)"
							class="flex-col items-center section_12 equal-division-item space-y-26">
							<block v-if="!cagePhotos[1]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">自备笼具</text>
							</block>
							<block v-else>
								<image class="image_11" :src="cagePhotos[1]" />
							</block>
						</view>
						<view @click="chooseImg('cagePhoto',2)"
							class="flex-col items-center section_12 equal-division-item space-y-26">
							<block v-if="!cagePhotos[2]">
								<image class="image_10"
									src="https://qiniu.ccchongya.com/chongya/images/867f1b81fceadcd701fa77097d464b9c.png" />
								<text class="font_7">自备笼具</text>
							</block>
							<block v-else>
								<image class="image_11" :src="cagePhotos[2]" />
							</block>
						</view>
					</view>
				</view>
				<view class="flex-col section_13 space-y-14">
					<text class="self-start font_1">备注留言</text>
					<view class="flex-col justify-start items-start text-wrapper_9">
						<textarea v-model="formData.message" class="font_4 text_16" placeholder="请输入备注内容"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col group_13 space-y-24">
			<view class="flex-row items-center group_14 space-x-8">
				<view class="shrink-0 section_14" @click="agreeChange">
					<span :class="{'select':agree}"></span>
				</view>
				<view class="group_15">
					<text class="font_6 text_17">我已阅读并同意</text>
					<text class="font_4 text_18"  @click="go('/pages/user/rules?type=7');">《宠物运输契约条款》</text>
				</view>
			</view>
			<view class="flex-col justify-start items-center relative group_16">
				<view class="section_15"></view>
				<view class="flex-col justify-start items-center text-wrapper_10 pos_5">
					<text class="text_19" @click="quote">获取报价</text>
				</view>
			</view>
		</view>

			<tab-bar ref="tabbar" :active="2"></tab-bar>
	</view>
</template>

<script>
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	export default {
		components: {},
		props: {},
		data() {
			return {
				activeTab:0,
				petcats:'',
				showPetCate: false,
				selected: {}, //选取的分类 ,用对象更方便存取数据
				selected_ids: {},
				selected_titles:'',
				petcatArray:[
					{
						id:1,
						title:'狗'
					},
					{
						id:2,
						title:'猫'
					},
					{
						id:3,
						title:'鼠'
					},
					{
						id:4,
						title:'龟'
					},
					{
						id:5,
						title:'鱼'
					},
					{
						id:6,
						title:'马'
					},
					{
						id:7,
						title:'鸟'
					},
					{
						id:8,
						title:'其他'
					}
				],


				show_pop:false,
				isflag: true,
				agree: false,
				petVolumeArray: ["小型", "中型", "大型", "都有"],
				petTypeArray: ["小狗", "小猫"],
				cageSizeArray: ["0.5平方","1平方","2平方","3平方","4平方以上", ],
				// shuttleArray: ['送宠到家','提供笼具'],
				shuttleArray: ['上门接宠','送宠到家'],
				shuttleArray_index:[],
				haulMethodArray: ["宠物快车", "宠物空运", "铁路托运", "城市专线", "空调专车", "宠物客运"],
				addServiceMethodArray:['上门接宠','送宠到家'],
				tasteList :[1,2,3,4,5],
				formData: {
					type:0,
					cageSize: 0,
					shuttle: "",
					number: 1,
					provideCage:0,
					jianyiCert: 0,
					insureStatus: 0,
					urgentStatus: 0,
					locateStatus: 0,
					petType: 0,
					petVolume: 0,
					expectedTime: "2023-09-29 00:00:00",
					petPhoto: ",,,",
					cagePhoto: ",,,",
					haulMethod:0,
					addServiceMethod:0,
				},
				addressType: '',
				tyAddressTo: {},
				tyAddressFrom: {},





				flist: [
				        {
				          id: 1,
				          name: '鱼类'
				        },
				        {
				          id: 2,
				          name: '虾类'
				        },
				        {
				          id: 3,
				          name: '贝类'
				        },
				        {
				          id: 4,
				          name: '其他'
				        }
				],
				slist: [
					{
					  id: 5,
					  pid: 1,
					  name: '海水类',
					  child: [
						{
						  id: 8,
						  name: '美国红鱼'
						},
						{
						  id: 9,
						  name: '卵形鲳鲹'
						},
						{
						  id: 10,
						  name: '大黄鱼'
						},
						{
						  id: 11,
						  name: '鲆蝶类'
						},
						{
						  id: 12,
						  name: '石斑鱼'
						}
					  ]
					},
					{
					  id: 6,
					  pid: 1,
					  name: '淡水类',
					  child: [
						{
						  id: 14,
						  name: '鲌鱼'
						},
						{
						  id: 15,
						  name: '淡水白鲳'
						},
						{
						  id: 16,
						  name: '白斑狗鱼'
						},
						{
						  id: 17,
						  name: '鲮鱼'
						},
						{
						  id: 18,
						  name: '罗汉鱼'
						},
						{
						  id: 19,
						  name: '鲶'
						},
						{
						  id: 20,
						  name: '草鱼'
						},
						{
						  id: 21,
						  name: '团头鲂'
						},
						{
						  id: 22,
						  name: '罗非鱼'
						},
						{
						  id: 23,
						  name: '斑点叉尾鮰'
						},
						{
						  id: 24,
						  name: '虹鳟'
						},
						{
						  id: 25,
						  name: '加州鲈'
						},
						{
						  id: 26,
						  name: '黄颡鱼'
						},
						{
						  id: 27,
						  name: '鳗鲡'
						},
						{
						  id: 28,
						  name: '锦鲤'
						},
						{
						  id: 29,
						  name: '鲫鱼'
						},
						{
						  id: 30,
						  name: '鳜鱼'
						},
						{
						  id: 31,
						  name: '黄鳝'
						},
						{
						  id: 32,
						  name: '泥鳅'
						}
					  ]
					}
				],
				slistTmp: [
				        {
				          id: 5,
				          pid: 1,
				          name: '海水类',
				          child: [
				            {
				              id: 8,
				              name: '美国红鱼'
				            },
				            {
				              id: 9,
				              name: '卵形鲳鲹'
				            },
				            {
				              id: 10,
				              name: '大黄鱼'
				            },
				            {
				              id: 11,
				              name: '鲆蝶类'
				            },
				            {
				              id: 12,
				              name: '石斑鱼'
				            }
				          ]
				        },
				        {
				          id: 6,
				          pid: 1,
				          name: '淡水类',
				          child: [
				            {
				              id: 14,
				              name: '鲌鱼'
				            },
				            {
				              id: 15,
				              name: '淡水白鲳'
				            },
				            {
				              id: 16,
				              name: '白斑狗鱼'
				            }
				          ]
				        },
				        {
				          id: 52,
				          pid: 2,
				          name: '海水类',
				          child: [
				            {
				              id: 82,
				              name: '虾1'
				            },
				            {
				              id: 92,
				              name: '虾2'
				            },
				            {
				              id: 102,
				              name: '虾3'
				            },
				            {
				              id: 112,
				              name: '虾4'
				            },
				            {
				              id: 122,
				              name: '虾5'
				            }
				          ]
				        },
				        {
				          id: 62,
				          pid: 2,
				          name: '淡水类',
				          child: [
				            {
				              id: 14,
				              name: '虾6'
				            },
				            {
				              id: 15,
				              name: '虾7'
				            },
				            {
				              id: 16,
				              name: '虾8'
				            }
				          ]
				        },
				        {
				          id: 623,
				          pid: 3,
				          name: '海水类',
				          child: [
				            {
				              id: 14,
				              name: '贝1'
				            },
				            {
				              id: 15,
				              name: '贝2'
				            }
				          ]
				        },
				        {
				          id: 624,
				          pid: 4,
				          name: '海水类',
				          child: [
				            {
				              id: 14,
				              name: '其它'
				            }
				          ]
				        }
				],
					  currentId:0,
					  scrollTop: 0,
					     			oldScrollTop: 0,
									vSelect:[],

			};
		},
		computed: {

			i18n() {
				return this.$t('advice')
			},
			petPhotos() {
				if (this.formData.petPhoto) {
					let arr = this.formData.petPhoto.split(",")
					if (arr.length == 1) {
						arr.push("");
						arr.push("");
					}
					if (arr.length == 2) {
						arr.push("");
					}
					return arr;
				}
				return ["", "", ""]
			},
			cagePhotos() {
				if (this.formData.cagePhoto) {
					let arr = this.formData.cagePhoto.split(",")
					if (arr.length == 1) {
						arr.push("");
						arr.push("");
					}
					if (arr.length == 2) {
						arr.push("");
					}
					return arr;
				}
				return ["", "", ""]
			},
		},
		mounted() {
			// this.tyAddressFrom = uni.getStorageSync('tyAddressFrom');
			// this.tyAddressTo = uni.getStorageSync('tyAddressTo');
			this.tyAddressTo = this.$store.state.tyAddressTo;
			this.tyAddressFrom = this.$store.state.tyAddressFrom;
		},
		onLoad: function(options) {
			uni.hideTabBar();
			if(options.type){
				this.tabSwitch(options.type)
			}
		},
		methods: {

			toAddress(type) {
				uni.navigateTo({
					url: '/pages/ys/address?type=' + type
				})
			},
			  open() {
			          // console.log('open');
			        },
			        close() {
			          this.showPetCate = false
			          // console.log('close');
			        },

			petcatshow(){
				this.showPetCate=true
				console.log(this.showPetCate)
			},
			tabSwitch(index) {
							this.activeTab = index
							this.formData.type = index
			},
			// start0
			// 获取用户信息
			 getPetCates() {
				this.loading = true;
			  	 this.$http
					.get(tags, {
					})
					.then(r => {
						this.tags = r.data;
						console.log("tags",this.tags);

						// this.dataList = this.dataList.concat(res.rows)
						// let list = []
						// this.tags.forEach(e =>{
						// 	this.rgbColor()
						// 	// console.log("rgbColor")
						// 	e.background=		this.rgbColor()
						// })

						this.loading = false;
					 this.havetags()
					})
					.catch(() => {
						this.loading = false;
					});
			},
			//选取分类
			    onSelectClassify(id) {
			      this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
						this.petcatArray.forEach(e =>{
							if(id==e.id){
								if(this.selected[id]){
									 // e.background=		this.rgbColor()
									  e.background=		"#ffbd52”"

								}else{
									 e.background=		"#f1f1f1"
								}
							}

						})



						//  //需求找到数组内偶数
						// 	let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

						// 	let newArr = arr.filter((item, i, arr) => {
						// 	//函数本身返回布尔值，只有当返回值为true时，当前项存入新数组。
						// 	return item % 2 == 0
						// 	})
						// console.log(newArr)


						// console.log(this.selected)
						// 		console.log(typeof(this.selected))

								// const names = Object.keys(this.selected)
								//  // .filter(key)=> key.includes("Name"))
								//     .reduce((obj, key) => {
								// 			// console.log(this.selected[key])
								// 			 if (this.selected[key]== true) {
								// 			        // obj[key] = this.selected[key];
								// 							  obj[key] = key;
								// 			 }
								// 			  return obj;
								//         // return Object.assign(obj, {
								//         //   [key]: this.selected[key]
								//         // });
								//   }, {});


								//  this.selected_ids = Object.values(names)
								//  // 	console.log(typeof(this.selected_ids));
								// 	// console.log("selected_ids",this.selected_ids);
								// 	this.selected_ids = this.selected_ids.join(',')
									// console.log("selected_ids",this.selected_ids);
						// this.selected.forEach(e =>{
						// 								if(ture==e){
						// 											console.log(e)
						// 								}

						// 	})


			    },

					rgbColor() {
							let r = Math.floor(Math.random() * 256);
							let g = Math.floor(Math.random() * 256);
							let b = Math.floor(Math.random() * 256);
							let rgb = `rgb(${r},${g},${b})`;

							// return "background:" + rgb
							return "background:#ffbd52"


							// this.colorData.push("background:" + rgb)

			    },
			//重置
			onClear() {
			  // this.selected = {}

				let  that = this
				let select = [] //选择的筛选结果数组
				let select_ids = []
				let select_titles = []
				this.tags.forEach(e =>{
															console.log(e.id)
															if('that.tags[i].id',that.haveTags.includes(e.id)){
																 e.background=		that.rgbColor()
																	that.$set(that.selected, e.id, true) //动态更新视图数据
																	select.push(e)
																	select_ids.push(e.id)
																	select_titles.push(e.title)
															}else{
																	e.background=		"#f1f1f1"
																	that.$set(that.selected, e.id, false) //动态更新视图数据
															}
				})

				that.selected_ids = select_ids
				that.selected_titles =select_titles


				this.selected_ids=  this.selected_ids.join(',')
				this.petcats =  this.selected_titles.join(',')



				this.showPetCate = false;

			},
			//提交筛选
			onConfirmFiltrate() {
			  let select = [] //选择的筛选结果数组
				  let select_ids = []
					  let select_titles = []
			  const {
			    petcatArray,
			    selected,
					selected_ids,
					selected_titles
			  } = this




			  //Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
			  Object.keys(selected).forEach(key => {
			    if (selected[key]) {
			      for (let i = 0; i < petcatArray.length; i += 1) {
			        petcatArray[i].id == key ? select.push(petcatArray[i]) : ''
							petcatArray[i].id == key ? select_ids.push(petcatArray[i].id) : ''
							petcatArray[i].id == key ? select_titles.push(petcatArray[i].title) : ''
			      }

			    }

			  })
			  console.log(select ,"选择结果数组-----");
				this.selected_ids = select_ids
				this.selected_titles =select_titles



			  this.selected_ids=  this.selected_ids.join(',')
				this.petcats =  this.selected_titles.join(',')
				this.showPetCate = false

						this.formData.petType = this.selected_ids
						console.log('this.petcats' ,this.petcats )


			},


			// ?start1
			tabtap(item) {
			    if (!this.sizeCalcState) {
			      this.calcSize();
			    }
			    this.currentId = item.id;
			    let list = [];
			    this.slistTmp.map(sitem => {
			      if (sitem.pid === item.id) {
			        list.push(sitem);
			      }
			    });
			    this.slist = list;
			  },
			  //计算右侧栏每个tab的高度等信息
			  calcSize() {
			    let h = 0;
			    this.slist.forEach(item => {
			      let view = uni.createSelectorQuery().select('#main-' + item.id);
			      view.fields(
			        {
			          size: true
			        },
			        data => {
			          item.top = h;
			          h += data.height;
			          item.bottom = h;
			        }
			      ).exec();
			    });
			    this.sizeCalcState = true;
			  },
			  tapInfo(e) {
			    if (this.vSelect.indexOf(e) == -1) {
			      this.vSelect.push(e);
			    }
			  },














			agreeChange() {
				this.agree = !this.agree
			},
			chooseImg(type, i) {
				const self = this;
				$.uploadimg({
					success(res) {
						console.log("res.imgUrl", res.imgUrl)
						if (type == 'cagePhoto') {
							let str = self.formData.cagePhoto
							let arr = str.split(",")
							arr[i] = res.imgUrl;
							str = arr.join(",")
							self.$set(self.formData, "cagePhoto", str)
						} else {
							let str = self.formData.petPhoto
							let arr = str.split(",")
							arr[i] = res.imgUrl;
							str = arr.join(",")
							self.$set(self.formData, "petPhoto", str)
						}
					}
				})
			},
			selectShuttleMethod(index) {



				//  var colors = ["red", "blue", "grey"];

				//  colors = colors.filter(function(item) {
				//      return item != "red"
				//  });

				//  console.log(colors);    //["blue", "grey"]
				// return

				const self = this;
				let arr
				if(self.formData.shuttle.length>0){
						let str = self.formData.shuttle
						 arr = str.split(",")
				}else{
						 arr = []
				}
				let name = this.shuttleArray[index];
				if(arr.includes(name)){
				        //删除
					  //  self.shuttleArray_index.splice(index, 1);
				    // this.shuttleArray.splice(index, 1);

					  // this.shuttleArray.forEach(function(item, i, arr) {
					  //     if(item == name) {
					  //         arr.splice(i, 1);
					  //     }
					  // });

					  // 代码很简单，找出元素不是”red”的项数返回给colors（其实是得到了一个新的数组），从而达到删除的作用s
						arr =  arr.filter(function(item,index1) {
							return item != name
						});

						 this.shuttleArray_index=   this.shuttleArray_index.filter(function(item,index2) {
							return item != index
						});
				}else{


					arr.push(this.shuttleArray[index])
					self.shuttleArray_index.push(index)
					//添加
				}


				self.formData.shuttle =  arr.join(',')
				// console.log("	self.formData.shuttle "	,self.formData.shuttle );

			},
			selectHaulMethod(index) {
				this.formData.haulMethod = index
			},
			selectAddServiceMethod(index) {
				this.formData.addServiceMethod = index

			},
			expectedTimechange(newval) {
				console.log('范围选:', this.datetimerange);
			},
			locateStatusChange(v) {
				if (v.detail.value) {
					this.formData.locateStatus = 1
				} else {
					this.formData.locateStatus = 0
				}
			},
			urgentStatusChange(v) {
				if (v.detail.value) {
					this.formData.urgentStatus = 1
				} else {
					this.formData.urgentStatus = 0
				}
			},
			insureStatusChange(v) {
				if (v.detail.value) {
					this.formData.insureStatus = 1
				} else {
					this.formData.insureStatus = 0
				}
			},
			jianyiCertChange(v) {
				if (v.detail.value) {
					this.formData.jianyiCert = 1
				} else {
					this.formData.jianyiCert = 0
				}
			},
			provideCageChange(v) {
				if (v.detail.value) {
					this.formData.provideCage = 1
				} else {
					this.formData.provideCage = 0
				}
			},
			bindCageSizePickerChange: function(e) {
				this.formData.cageSize = e.detail.value
			},
			bindShuttlePickerChange: function(e) {
				this.formData.shuttle = e.detail.value
			},
			bindPetTypePickerChange: function(e) {
				this.formData.petType = e.detail.value
			},
			bindPetVolumePickerChange: function(e) {
				this.formData.petVolume = e.detail.value
			},
			formataddressData(obj){
			    let data = {};
				data.phone  =  obj.tel
				data.realname  =  obj.contacts
				// data.getProvince  =  obj.address.city
				data.city  =  obj.address.city

				data.address  =  obj.address.address+""+obj.address.name

				data.lng  =  obj.address.longitude
				data.lat  =  obj.address.latitude

				return  data;
			},
			quote() {
				const self = this;
				console.log(this.tyAddressTo);


				let tyAddressTo = self.formataddressData(this.tyAddressTo)
				let tyAddressFrom = self.formataddressData(this.tyAddressFrom)

				let postData = {
					addFormJson: JSON.stringify(this.formData),
					addressToJson: JSON.stringify(tyAddressTo),
					addressFromJson:JSON.stringify(tyAddressFrom)
				}
				if (!this.agree) {
					$.$toast("请勾选宠物运输契约条款");
					return
				}
				if (!this.isflag) {
					return
				}
				this.isflag = false;
				$.ajax({
					url: API.addOrderApi,
					data: postData,
					method: 'POST',
					loading: true,
					loadingText: "提交订单" + ['…'],
					success(res) {
						console.log("res",res)
						let info = res.data;
						// self.go('/pages/ys/order/quote?orderNo=' + info.orderNo);
						self.go('/pages/ys/order/entrust?orderNo=' + info.orderNo);
					},
					complete() {
						this.isflag = true;
					}
				})
			},
		},
	};
</script>

<style scoped lang="css">
	@import url('../../static/css/style.css');



	.page {
		background-color: #f5f7f7;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.space-y-29 .section {
		padding: 0 32rpx;
		padding-top: 56rpx;
	}

	.section {
		background-image: linear-gradient(0deg, #f5f7f7 0%, #ffbd52 100%);
		/* height: 696rpx; */
	}

	.section_bg {
		/* background-color: #fff; */
		border-radius: 16rpx;
		padding-bottom: 32rpx;
	}

	.section_2 {}

	.group {}

	.group_2 {
		height: 80rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.section_3 {
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx #f0f0f040;
		width: 100rpx;
		height: 88rpx;
		position: absolute;
		left: 0;
		top: -8px;
		z-index: 9999;
		border-radius: 16rpx;
	}

	.text-wrapper {
		padding: 28rpx 0;
		/* background-color: #ffffff; */
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.pos_8 {
		/* border :1px solid #ff0000; */
		/* height:100r/px; */

	/* 	padding-top: 40rpx;
		 margin-top: -40rpx; */

		 background-color: transparent;
		 background-image:url('https://qiniu.ccchongya.com/chongya/images/16947555445745866370.png');
		 background-size:cover


		/* background-image:url('https://qiniu.ccchongya.com/chongya/images/16947555446803444236.png'); */

	}

	.pos_8 .text {
		/* float: right; */
		/* margin-left: 136rpx; */
		font-weight: 700;
	}

	.pos_2 {
		position: absolute;
		right: 0;

	}

	.font_1 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #081329;
	}

	.pos_2 .text {
		margin-right: 136rpx;
		color: #000000;
		font-weight: 700;
	}

	.image {
		filter: drop-shadow(0px 4rpx 10rpx #0000001c);
		width: 362rpx;
		height: 94rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: -16rpx;
	}

	.image_2 {
		width: 26rpx;
		height: 12rpx;
	}

	.pos_3 {
		position: absolute;
		right: 324rpx;
		bottom: 0;
	}

	.group_3 {
		background-color: #ffffff;
		padding: 66rpx 32rpx 0;
		margin-top:-1px
	}

	.group_4 {
		padding: 0 4rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.text-wrapper_2 {
		padding: 8rpx 0;
		background-color: #4578ff;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #ffffff;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		/* margin-left: 12rpx; */
	}

	.font_3 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #666e7a;
	}

	.view {
		margin-top: 64rpx;
	}

	.text-wrapper_3 {
		padding: 8rpx 0;
		background-color: #43cf7c;
		border-radius: 50%;
		width: 41rpx;
		height: 41rpx;
	}

	.text_2 {
		color: #081329;
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		line-height: 30rpx;
	}

	.group_5 {
		margin-top: 40rpx;
		padding: 0 4rpx 5rpx;
	}

	.group_6 {
		padding: 36rpx 0 24rpx;
	}

	.divider {
		margin: 0 28rpx;
		background-color: #00000017;
		height: 1rpx;
	}

	.text-wrapper_4 {
		padding: 20rpx 0 12rpx;
		background-color: #ffffff;
		width: 193rpx;
	}

	.pos_4 {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}

	.font_4 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #081329;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 14rpx;
	}

	.section_4 {
		background-color: #078dff;
		width: 18rpx;
		height: 2rpx;
	}

	.text-wrapper_5 {
		padding: 0 8rpx;
		background-color: #f8f8f8;
		border-radius: 4rpx;
		width: 73rpx;
		height: 39rpx;
		font-size: 13rpx;
	}

	.text_3 {
		margin-left: 16rpx;
		line-height: 18rpx;
	}

	.image_3 {
		width: 18rpx;
		height: 18rpx;
	}

	.group_7 {
		background-color: #ffffff;
		padding: 20rpx 32rpx;
	}

	.space-y-17>view:not(:first-child),
	.space-y-17>text:not(:first-child),
	.space-y-17>image:not(:first-child) {
		margin-top: 34rpx;
	}

	.group_8 {
		width: 75rpx;
	}

	.image_4 {
		width: 32rpx;
		height: 32rpx;
	}

	.image_5 {
		margin-left: 44rpx;
	}

	.text_4 {
		margin-left: -76rpx;
	}

	.text_5 {
		line-height: 21rpx;
	}

	.section_5 {
		padding-left: 12rpx;
		background-color: #1890ff;
		height: 34rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #ffffff;
	}

	.text_6 {
		font-size: 18rpx;
		line-height: 17rpx;
	}

	.section_6 {
		background-color: #ffffff;
		border-radius: 50%;
		width: 27rpx;
		height: 27rpx;
	}

	.space-x-4>view:not(:first-child),
	.space-x-4>text:not(:first-child),
	.space-x-4>image:not(:first-child) {
		margin-left: 8rpx;
	}

	.image_6 {
		width: 24rpx;
		height: 24rpx;
	}

	.text_7 {
		line-height: 23rpx;
	}

	.group_9 {
		margin: 4rpx 0;
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 40rpx;
	}

	.button {
		flex: 1;
	}

	.group_10 {
		padding-left: 20rpx;
	}

	.image_7 {
		margin-left: 124rpx;
	}

	.text_8 {
		margin-left: -156rpx;
	}

	.image_8 {
		margin-left: 144rpx;
	}

	.text_9 {
		margin-left: -176rpx;
	}

	.group_11 {
		/* width: 127rpx; */
	}

	.image_9 {
		/* margin-left: 96rpx; */
		display: inline-block;
		vertical-align: middle;
	}

	.text_10 {
		/* margin-left: -128rpx; */
	}

	.group_12 {
		padding: 0 26rpx;
	}

	.section_7 {
		padding: 24rpx 32rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.space-y-11>view:not(:first-child),
	.space-y-11>text:not(:first-child),
	.space-y-11>image:not(:first-child) {
		margin-top: 22rpx;
	}

	.space-x-16 {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.space-x-16>view {
		margin-right: 32rpx;
		margin-bottom: 32rpx;
	}

	.text-wrapper_7 {
		padding: 16rpx;
		background-color: #ededed;
		border-radius: 40rpx;
		height: 54rpx;
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #000000;
	}



	.text-wrapper_active {
		background-color: #ffbd52;
		color: #fff;

	}

	.text-wrapper_active .font_6 {}

	/* .text_11 {
		color: #ffffff;
	} */





	.text_12 {
		line-height: 23rpx;
	}

	.space-x-15>view:not(:first-child),
	.space-x-15>text:not(:first-child),
	.space-x-15>image:not(:first-child) {
		margin-left: 30rpx;
	}

	.text-wrapper_8 {
		padding: 16rpx 0;
		background-color: #ededed;
		border-radius: 40rpx;
		width: 136rpx;
		height: 54rpx;
	}

	.text_13 {
		line-height: 23rpx;
	}

	.section_8 {
		padding: 32rpx 26rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.text_14 {
		margin-left: 8rpx;
	}

	.equal-division {
		margin-top: 28rpx;
	}

	.section_9 {
		flex: 1 1 208rpx;
	}

	.image_10 {
		width: 16rpx;
		height: 16rpx;
		margin-top: 56rpx;
	}

	.font_7 {
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 26rpx;
		color: #000000a6;
	}

	.section_10 {
		flex: 1 1 208rpx;
		margin-left: 8rpx;
	}

	.section_11 {
		padding: 32rpx 20rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.text_15 {
		margin-left: 12rpx;
	}

	.section_12 {
		flex: 1 1 208rpx;
		margin-left: 16rpx;
	}

	.equal-division-item {
		/* padding: 56rpx 0; */
		background-color: #0000000a;
		border-radius: 20rpx;
		height: 208rpx;
		overflow: hidden;
	}

	.space-y-26>view:not(:first-child),
	.space-y-26>text:not(:first-child),
	.space-y-26>image:not(:first-child) {
		margin-top: 52rpx;
	}

	.section_13 {
		padding: 32rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.space-y-14>view:not(:first-child),
	.space-y-14>text:not(:first-child),
	.space-y-14>image:not(:first-child) {
		margin-top: 28rpx;
	}

	.text-wrapper_9 {
		padding: 28rpx 0 164rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
	}

	.text_16 {
		margin-left: 28rpx;
		color: #808080;
		line-height: 23rpx;
		height: auto;
	}

	.group_13 {
		margin: 222rpx 0;
		padding: 0 112rpx;
	}

	.space-y-24>view:not(:first-child),
	.space-y-24>text:not(:first-child),
	.space-y-24>image:not(:first-child) {
		margin-top: 48rpx;
	}

	.group_14 {
		padding: 0 32rpx;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.section_14 {
		background-color: #ffffff;
		border-radius: 16rpx;
		width: 32rpx;
		height: 32rpx;
		border: solid 2rpx #ffc300;
	}

	.section_14 .select {
		width: 20rpx;
		height: 20rpx;
		border-radius: 11rpx;
		background-color: #ffc300;
		display: block;
		margin-top: 4rpx;
		margin-left: 4rpx;
	}

	.group_15 {
		line-height: 23rpx;
		height: 23rpx;
	}

	.text_17 {
		line-height: 23rpx;
	}

	.text_18 {
		color: #ffbd52;
		line-height: 23rpx;
	}

	.group_16 {
		padding-top: 80rpx;
	}

	.section_15 {
		background-color: #f7cd1c;
		border-radius: 232rpx;
		filter: blur(16rpx);
		width: 359rpx;
		height: 20rpx;
	}

	.text-wrapper_10 {
		padding: 32rpx 0 36rpx;
		background-color: #ffbd52;
		border-radius: 100rpx;
	}

	.pos_5 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.text_19 {
		color: #00000082;
		font-size: 36rpx;
		font-family: HarmonyOSSansSC;
		line-height: 33rpx;
	}


	.equal-division_2 {
		margin-top: 72rpx;
	}

	.section_16 {
		padding: 24rpx 0;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_17 {
		flex: 1 1 150rpx;
	}

	.equal-division-item_2 {
		padding: 12rpx 0;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.image_11 {
		width: 208rpx;
		height: 208rpx;
	}

	.font_8 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_20 {
		color: #ffbd52;
	}
</style>

<style scoped lang="css">
.pop {
  background: #fff;
  border-radius: 40rpx 40rpx 0  0;
  .btns {
    display: flex;
    justify-content: space-between;
    padding-top: 4upx;
    .pop-button {
      padding: 15px;
    }
  }
  .item-box {
    padding: 10px;
    .item {
      display: inline-block;
      border: 1px solid #1550b5;
      color: #1550b5;
      border-radius: 12px;
      padding: 2px 10px;
      margin-right: 10px;
      &.cur {
        color: #fff;
        border: 1px solid #1550b5;
        background-color: #1550b5;
      }
    }
  }
  .pop-content {
    height: 100%;
    background-color: #fafafa;
    display: flex;
    height: 800upx;
    margin: 0 -20upx;
    .content {
      display: flex;
    }

    .left-aside {
      flex-shrink: 0;
      width: 240upx;
      height: 100%;
      background-color: #f7f7f7;
    }
    .f-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100upx;
      font-size: 28upx;
      color: #757575;
      position: relative;
      &.active {

        color: #1550b5;
        background: #f7f7f7;
        font-size: 36upx;
        font-weight: bold;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 34upx;
          width: 8upx;
          background-color: #1550b5;
          border-radius: 0 4upx 4upx 0;
        }
      }
    }

    .right-aside {
      flex: 1;
      overflow: hidden;
      padding: 16upx 32upx 0 20upx;
      /deep/ .uni-scroll-view {
        height: 450px;
        overflow-y: auto;
      }
    }
    .s-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 70upx;
      padding-top: 8upx;
      font-size: 28upx;
      color: #757575;
      background: #fff;
      .icon {
        margin: 0 16upx;
        transform: scale(0.5);
      }
    }
    .t-list {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      padding: 12upx 6upx 0 6upx;
      margin-bottom: 24upx;
      &:after {
        content: '';
        flex: 99;
        height: 0;
      }
      .t-item {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        min-width: 200upx;
        font-size: 28upx;
        color: #666;
        margin: 0 10upx 40upx 10upx;
		padding:5px 0;
        &.active {

          color: #fff;
          background-color: #1550b5;
          border-radius: 24upx;
        }
      }
    }
  }
}





















</style>
<style>
	.topPop {
			padding: 30upx;
			height:100%;
					// position: relative;

		// display: flex;
									// align-items: flex-end;
			.topPop1 {
				// position: absolute;
				// bottom: 0;
				display: flex;
	// vertical-align: bottom;
				.img2 {
					width: 50upx;
					height: 50rpx;
					position:absolute;
					top:30rpx;
					right:30rpx;

				}

				.img1 {
					width:300rpx;
					// flex: 1;
				}
			}
		}

  .classifyBigBox {
    margin: 47rpx 20rpx;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10rpx;
  }

  .oneClassify {
    display: flex;
    align-items: center;
    padding: 10rpx;
		margin-bottom:10px;

    justify-content: center;
    background: #f1f1f1;
    border-radius: 30rpx;
    color: #666;
    border: 2rpx solid #dedede;
  }

  .selectActive {
    background: rgb(255, 189, 82);
    color: #FFFFFF;
  }

	.item0{background-color:#FF87BC;color:#ffffff}
	.item1{background-color:#E97D39;color:#ffffff}
	.item2{background-color:green;color:#ffffff}
	.item3{background-color:darkorchid;color:#ffffff}
	.item4{background-color:brown;color:#ffffff}
	.item5{background-color:#FF87BC;color:#ffffff}
	.item6{background-color:#E97D39;color:#ffffff}
	.item7{background-color:green;color:#ffffff}
	.item8{background-color:darkorchid;color:#ffffff}
	.item9{background-color:brown;color:#ffffff}
	.item10{background-color:#FF87BC;color:#ffffff}
	.item11{background-color:#E97D39;color:#ffffff}
	.item12{background-color:green;color:#ffffff}
	.item13{background-color:darkorchid;color:#ffffff}
	.item14{background-color:brown;color:#ffffff}
	.item15{background-color:#FF87BC;color:#ffffff}
	.item16{background-color:#E97D39;color:#ffffff}
	.item17{background-color:green;color:#ffffff}
	.item18{background-color:darkorchid;color:#ffffff}
	.item19{background-color:brown;color:#ffffff}
	.item20{background-color:#FF87BC;color:#ffffff}
	.item21{background-color:#E97D39;color:#ffffff}
	.item22{background-color:green;color:#ffffff}
	.item23{background-color:darkorchid;color:#ffffff}
	.item24{background-color:brown;color:#ffffff}
	.item25{background-color:#FF87BC;color:#ffffff}
	.item26{background-color:#E97D39;color:#ffffff}
	.item27{background-color:green;color:#ffffff}
	.item28{background-color:darkorchid;color:#ffffff}
	.item29{background-color:brown;color:#ffffff}
	.item30{background-color:#FF87BC;color:#ffffff}



  .tl-btn-120{
    width: 180rpx;
    padding: 17rpx;
    background: F7F7F7;
    color: #999;
    border-radius: 13rpx;
    border: 2rpx solid #dedede;
    text-align: center;
  }
  .onConfirmFiltrate{
    width: 180rpx;
    padding: 17rpx;
    background: #2851F3;
    color: #FFFFFF;
    border-radius: 13rpx;
    text-align: center;
    margin-left: 20rpx;
  }


 /* .custom-datetime-picker{
	  padding-bottom: 100px;
  }
  .uni-date-changed {
	  padding-bottom:100px;
  } */
  /* uni-date-btn--ok */


/deep/ .uni-datetime-picker--btn {
	    margin-bottom: 150rpx;
  }
</style>
